import React from 'react'
import { View, TouchableOpacity, Image } from 'react-native'
import { useNavigation } from '@react-navigation/native'
import styles from './styles'

const ListItem = props => {
  const navigation = useNavigation()

  const _goDetail = async () => {
    if (props.url) {
      let loginData = {}
      try {
        loginData = await global.storage.load({key: 'loginState'})
      } catch (err) {
        loginData = {}
      }
      if (!loginData.token) {
        navigation.navigate('Login')
      } else {
        navigation.navigate('Webview', {
          url: `${props.url}${/\?/.test(props.url) ? '&' : '?'}platformType=ctApp&token=${loginData.token || ''}&uid=${loginData.uid || ''}`, 
          title: props.title,
          fullScreen: true
        })
      }
    }
  }

  return (
    <TouchableOpacity onPress={_goDetail}>
      <View style={styles.wrap}>
        <Image source={{
            uri: props.coverUrl
          }} style={styles.background} />
      </View>
    </TouchableOpacity>
  )
}

export default ListItem
